<template>
  <div>
    <div class="ccui-multifunctional-table-wrapper">
      <el-table
          :data="settlementList"
          class="ccui-form-child-table"
          border
          show-summary
          :summary-method="getSummaries"
          @select="listSelectTable"
          @select-all="listSelectTable"
        >
          <el-table-column
            show-overflow-tooltip
            label="序号"
            type="index"
            align="center"
            width="55"
            fixed
          />

          <el-table-column
            show-overflow-tooltip
            prop="materialCode"
            label="设备物资编码"
            width="110"
            fixed
          >
          </el-table-column>

          <el-table-column
            show-overflow-tooltip
            prop="materialName"
            label="设备物资名称"
            width="300"
          >
          </el-table-column>

          <el-table-column
            show-overflow-tooltip
            prop="materialState"
            label="设备物资说明"
            width="130"
          >
          </el-table-column>

          <el-table-column
            show-overflow-tooltip
            prop="measureUnit"
            label="计量单位"
            width="100"
          >
          </el-table-column>
          <!-- 冲销数量取结算数量 -->
          <el-table-column
            show-overflow-tooltip
            prop="settlementCount"
            label="冲销数量"
            width="130"
          >
          </el-table-column>

          <el-table-column
            show-overflow-tooltip
            prop="unitPriceWithTax"
            label="含税单价"
            width="130"
            align = "right"
            header-align= "left"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="unitPriceWithoutTax"
            label="不含税单价"
            width="130"
            align = "right"
            header-align= "left"
          >
          </el-table-column>
          <!-- 冲销金额取含税金额 -->
          <el-table-column
            show-overflow-tooltip
            prop="moneyWithTax"
            label="冲销金额"
            width="130"
            align = "right"
            header-align= "left"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="moneyWithoutTax"
            label="不含税金额"
            width="130"
            align = "right"
            header-align= "left"
          >
          </el-table-column>
      </el-table>
    </div>
<!-- 
    <chooseMaterials
      ref="materialsFormVisible"
      @handleSelect="handleSelect"
      :chooseMaterialsBtn="chooseMaterialsBtn"
    /> -->
  </div>
</template>

<script>
import jsList from "../js";
import BigNumber from "bignumber.js";
export default {
  name: "financeInfoCheck",
  // components: { chooseMaterials },
  props: {
    settlementList: {
      type: Array
    }
  },
  data() {
    return {
      jsList,
      listTableData: [],
      materialVisible: false,
      chooseMaterialsBtn: 0 // 点击选择物资按钮时为true
    };
  },
  created() {},
  mounted() {},
  activited() {},
  update() {},
  methods: {
    // 采购计划选择确认
    planConfirm(data) {
      console.log("采购计划选中行==>>", data);
    },
    // 采购方案选择确认
    programmeConfirm(data) {
      console.log("采购方案选中行==>>", data);
    },
    // 选择材料
    handleChooseMaterials() {
      // 打开新增物资清单页面
      this.$refs.materialsFormVisible.dialogFormVisible = true;
      this.chooseMaterialsBtn++;
    },
    // 采购清单选中数据
    listSelectTable(val) {
      this.listTableData = val;
    },
    handleSelect(row) {},
    // 合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              if (column.label == "冲销数量") {
                  let num1 = new BigNumber(Number(prev)).plus(Number(curr)).toNumber();
                return Number(num1)
              } else if (
                column.label == "含税金额" ||
                column.label == "不含税金额" ||
                column.label == "冲销金额"
              ) {
                let num = new BigNumber(Number(prev)).plus(Number(curr)).toNumber();
                return Number(num)
              }
            } else {
              return (prev = " ");
            }
          }, 0);
          if (column.label == "冲销数量") {
            sums[index] = Number(sums[index]).toFixed(3);
          }

          if (column.label == "含税金额") {
            sums[index] = Number(sums[index]).toFixed(2);
          }
          if (column.label == "不含税金额") {
            sums[index] = Number(sums[index]).toFixed(2);
          }
          if (column.label == "冲销金额") {
            sums[index] = Number(sums[index]).toFixed(2);
          }
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },
    // 金额四舍五入 8位小数
    calculateFilter(data) {
      if (data || data == 0) {
        if ((data + "").indexOf(".") != -1) {
          let newData = (data + "").substring(0, (data + "").indexOf(".") + 9);
          return newData;
        } else {
          return data;
        }
      } else {
        return "";
      }
    },
    // 金额四舍五入
    numberFilter(data) {
      if (data || data == 0) {
        if ((data + "").indexOf(".") != -1) {
          let newData = (data + "").substring(0, (data + "").indexOf(".") + 4);
          return newData;
        } else {
          return data;
        }
      } else {
        return "";
      }
    },
  },
  filter: {},
  computed: {},
};
</script>

<style lang="scss" scoped>
/deep/ .ccui-multifunctional-table-wrapper {
  .el-table td,
  .el-table th.is-leaf {
    border-right: 1px solid #edf2fc;
  }
}
.ml {
  margin-left: 10px;
}
.operation-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}
/deep/
  .ccui-multifunctional-table-wrapper
  .el-table
  tbody
  tr
  td:first-child
  .cell {
  border-right: 1px solid #f1f1f1;
}
.deleteLine {
  padding: 0 20px;
  height: 30px;
  background: #f7f9ff;
  border: 1px solid #0089ef;
  border-radius: 4px;
  position: relative;
  color: #0089ef;
  margin-left: 10px;
}
/deep/ .el-table__body-wrapper {
  z-index: 1;
}
/deep/.el-table__footer-wrapper{
  margin-top:0px !important;
}
</style>
